<script setup lang="ts">
import { reactive, ref } from "vue";
import { IModuleOwnersRegisterInfo, IModuleEmployeesRegisterInfo } from "./data";
import { registerOwner, registerEmployees } from "./server";
import { IResponseData } from "@/@types/utils.request";
import { ResultCodeEnum } from "@/enums/utils.request.enum";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";

const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
	formOwner.imageUrl = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
	if (rawFile.type !== "image/jpeg") {
		ElMessage.error("Avatar picture must be JPG format!");
		return false;
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error("Avatar picture size can not exceed 2MB!");
		return false;
	}
	return true;
};

const handleAvatarSuccess2: UploadProps["onSuccess"] = (response, uploadFile) => {
	formEmployees.imageUrl = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload2: UploadProps["beforeUpload"] = (rawFile) => {
	if (rawFile.type !== "image/jpeg") {
		ElMessage.error("Avatar picture must be JPG format!");
		return false;
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error("Avatar picture size can not exceed 2MB!");
		return false;
	}
	return true;
};

const role = ref(1);

const formOwner = reactive<IModuleOwnersRegisterInfo>({
	username: "",
	password: "",
	realName: "",
	gender: 0,
	email: "",
	idNumber: "",
	phoneNumber: "",
	checkInTime: "",
	imageUrl: "",
});

const formEmployees = reactive<IModuleEmployeesRegisterInfo>({
	username: "",
	password: "",
	realName: "",
	gender: 0,
	email: "",
	idNumber: "",
	phoneNumber: "",
	entryTime: "",
	imageUrl: "",
	departmentId: 0,
});

const submitForm = async () => {
	if (role.value === 1) {
		const response: IResponseData<any> = await registerOwner(formOwner);
		const { code } = response;
		if (code == ResultCodeEnum.SUCCESS) {
			ElMessage.success("注册成功");
		} else {
			ElMessage.error(response.message);
		}
	} else {
		const response: IResponseData<any> = await registerEmployees(formEmployees);
		const { code } = response;
		if (code == ResultCodeEnum.SUCCESS) {
			ElMessage.success("注册成功");
		} else {
			ElMessage.error(response.message);
		}
	}
};
</script>
<template>
  <el-container>
    <el-header>
      <h2>注册页面</h2>
    </el-header>
    <el-main>
      <el-radio-group v-model="role" style="margin-bottom: 20px;">
        <el-radio :label="1" :value="1" size="large" border>业主</el-radio>
        <el-radio :label="2" :value="2" size="large" border>员工</el-radio>
      </el-radio-group>
      <el-form v-if="role === 1" ref="form" :model="formOwner" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formOwner.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formOwner.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="formOwner.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <!-- <el-input v-model="formOwner.gender" autocomplete="off"></el-input> -->
          <el-radio-group v-model="formOwner.gender">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formOwner.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idNumber">
          <el-input v-model="formOwner.idNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="formOwner.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入住时间">
          <el-date-picker v-model="formOwner.checkInTime" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
        </el-form-item>
        <el-form-item label="头像" prop="imageUrl">
          <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/admin/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="formOwner.imageUrl" :src="formOwner.imageUrl" class="avatar" style="width: 100px; height: 100px;" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            提交
          </el-button>
        </el-form-item>
      </el-form>
      <el-form v-if="role === 2" ref="form" :model="formEmployees" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formEmployees.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formEmployees.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="formEmployees.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <!-- <el-input v-model="formEmployees.gender" autocomplete="off"></el-input> -->
          <el-radio-group v-model="formEmployees.gender">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formEmployees.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idNumber">
          <el-input v-model="formEmployees.idNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="formEmployees.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门号" prop="departmentId">
          <el-input v-model="formEmployees.departmentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入住时间">
          <el-date-picker v-model="formEmployees.entryTime" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
        </el-form-item>
        <el-form-item label="头像" prop="imageUrl">
          <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/admin/upload" :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload2">
            <img v-if="formEmployees.imageUrl" :src="formEmployees.imageUrl" class="avatar" style="width: 100px; height: 100px;" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            提交
          </el-button>
        </el-form-item>
      </el-form>
      <div class="item2">
        <RouterLink to="/user/login">去登录</RouterLink>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
.cell {
	line-height: 30px;
}

.status {
	padding-left: 20px;

	/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
	::v-deep(.el-badge__content.is-fixed.is-dot) {
		top: 12px;
		left: -8px;
	}
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
